<template>
<div class="list" ref="wrapper">
  <div>
  <div class="area">
     <div class="title">当前城市</div>
    <div class="button-list">
      <div class="button-wrapper">
          <div class="button">{{this.$store.state.city}}</div>
      </div>
    </div>
  </div>
  <div class="area">
    <div class="title">热门城市</div>
    <div class="button-list">
      <!--循环显示内容开始-->
      <div
        class="button-wrapper"
        v-for="item of hot"
        :key="item.id"
        @click="handleCityClick(item.name)"
      >
        <div class="button">{{item.name}}</div>
      </div>
      <!--循环显示内容结束-->
      <div
        class="button-wrapper"
        @click="handleCityClick('上海 ')"
      >
        <div class="button">上海</div>
      </div>
      <div
        class="button-wrapper"
        @click="handleCityClick('丽江')"
      >
        <div class="button">丽江</div>
      </div>
      <div
        class="button-wrapper"
        @click="handleCityClick('北京')"
      >
        <div class="button">北京</div>
      </div>

  </div>
    <!--循环显示内容开始-->
  <div class="area"
    v-for="(item,key) of cities"
    :key="key"
    :ref="key"
  >
    <div class="title">{{key}}</div>
    <div class="item-list" >
      <div
        class="item"
        v-for="innerItem of item"
        :key="innerItem.id"
        @click="handleCityClick(innerItem.name)"
      >
        {{innerItem.name}}
      </div>
    </div>
   </div>
<!--循环线是内容结束-->
    <div class="area" >
      <div class="title">A</div>
      <div class="item-list" >
        <div
          class="item"
          @click="handleCityClick('阿拉尔')"
        >
          阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
      </div>
      <div class="title" >B</div>
      <div class="item-list">
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
        <div class="item" @click="handleCityClick('阿拉尔')">阿拉尔</div>
      </div>
    </div>
   </div>
  </div>
</div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hot: Array,
    cities: Object,
    letter: String
  },
  methods: {
    handleCityClick (city) {
      this.$store.commit('changeCity', city)
      this.$router.push('/')
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .list
    overflow:hidden
    position: absolute
    top:1.58rem
    left:0
    right:0
    bottom:0
    .title
      height:.44rem
      line-height:.4rem
      padding-left:.2rem
      color: #666
      font-size:.26rem
      background: #eee
      border-bottom:0.02rem solid #ccc
    .button-list
      overflow: hidden
      padding:.1rem .6rem .1rem .1rem
      .button-wrapper
        float: left
        width: 33.33%
        .button
          padding: .1rem
          font-size: .26rem
          margin:.1rem
          text-align: center
          border:.02rem solid #ccc
          border-radius: .06rem
    .item-list
      .item
        line-height:.76rem
        color: #666
        font-size: .26rem
        padding-left:.2rem
        border-bottom:.02rem solid #ccc
</style>
